<template>
  <div
    style="
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      position: relative;
    "
  >
    <!-- <div  v-if="tableData.length > 0" style="position: absolute;bottom: 0;border: 1px solid;width:54%;height:4%;right: 0.35%; border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;border-top: none;"></div> -->
    <div
      style="
        background: #192c55;
        color: white;
        width: 100%;
        display: flex;
        align-items: center;
        height: 10%;
        border: 1px solid;
        box-sizing: border-box;
        text-align: center;
      "
    >
      <p style="width: 5%">序号</p>
      <p style="width: 13.5%">清单名称</p>
      <p style="width: 13.5%">规格</p>
      <p style="width: 13.5%">单位</p>
      <p style="width: 13.5%">{{ headerlist[0] }}</p>
      <p style="width: 13.5%">{{ headerlist[1] }}</p>
      <p style="width: 13.5%">{{ headerlist[2] }}</p>
      <p style="width: 13.5%">{{ headerlist[3] }}</p>
    </div>
    <div style="height: 90%" v-if="tableData.length > 0">
      <div
        class="cellstyle"
        v-for="(item, index) in tableData"
        :key="index"
        :class="index % 2 != 0 ? 'cellstyleeven' : ''"
      >
        <p style="width: 5%">{{ (currentPage - 1) * 10 + index + 1 }}</p>
        <p style="width: 13.5%" class="textchuli" :title="item.materialname">
          {{ item.materialname }}
        </p>
        <p style="width: 13.5%" class="textchuli" :title="item.specification">
          {{ item.specification }}
        </p>
        <p style="width: 13.5%" class="textchuli">
          {{ item.unit }}
        </p>

        <p
          style="
            width: 13.5%;
            border-left: 1px solid;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
          "
          class="textchuli"
          @click="showhtqlc(1, item)"
        >
          {{ item.newunitprice }}
        </p>

        <p style="width: 13.5%" class="textchuli" @click="showhtqlc(2, item)">
          {{ item.minunitprice }}
        </p>
        <p style="width: 13.5%" class="textchuli" @click="showhtqlc(3, item)">
          {{ item.maxunitprice }}
        </p>

        <p
          style="
            width: 13.5%;
            border-right: 1px solid;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
          "
          class="textchuli"
        >
          {{ item.avgunitprice }}
        </p>
      </div>
      <div style="height: 4%; width: 100%; display: flex">
        <p style="width: 5%"></p>
        <p style="width: 13.5%"></p>
        <p style="width: 13.5%"></p>
        <p style="width: 13.5%"></p>
        <p
          style="
            width: 13.5%;
            border-left: 1px solid;
            height: 100%;
            border-bottom: 1px solid;
            border-bottom-left-radius: 15px;
          "
        ></p>
        <p
          style="
            width: 13.5%;
            border-bottom: 1px solid;
            border-bottom: 1px solid;
            height: 100%;
          "
        ></p>
        <p
          style="
            width: 13.5%;
            border-bottom: 1px solid;
            border-bottom: 1px solid;
            height: 100%;
          "
        ></p>
        <p
          style="
            width: 13.5%;
            border-right: 1px solid;
            height: 100%;
            border-bottom: 1px solid;
            border-bottom-right-radius: 15px;
          "
        ></p>
      </div>
    </div>
    <div
      style="
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: space-around;
      "
      v-else
    >
      暂无数据
    </div>
    <Dialogback :modalVisible="showjgzzhtqlc" title="采购详情">
      <template>
        <div style="width: 98%; height: 97%; margin: 0 auto; display: flex">
          <Szjjdjlbdialog
            :code="dianjiliebiaocode"
            :id="dianjiliebiaoid"
            :obj="rowobj"
            :tendercode="tendercodelast"
          />
        </div>
      </template>
    </Dialogback>
  </div>
</template>

<script>
import APIS from "@/api/index";
import Dialogback from "@/components/dialogback.vue";
import Szjjdjlbdialog from "@/components/szjjdjlbdialog.vue";
export default {
  props: {
    tableData: Array,
    currentPage: Number,
    headerlist: Array,
    isactive: Number,
    time: Array,
  },
  components: { Szjjdjlbdialog, Dialogback },
  data() {
    return {
      showjgzzhtqlc: false,
      dianjiliebiaocode: "", //合同编码
      dianjiliebiaoid: "", //tenderId
      rowobj: {}, //点击对象
      tendercodelast: "", //tenderCode
    };
  },
  methods: {
    showhtqlc(num, item) {
      console.log(this.time,'///');
      // 1:最新  2:最低   3:最高
      let data = {};
      console.log(num, "num", this.isactive, item.materialcode, this.time);
      data = {
        type: this.isactive + 1,
        dataType: num,
        materialCode: item.materialcode,
      };

      if (this.time > 0) {
        data["startDate"] = this.time[0];
        data["endDate"] = this.time[1];
      }
      
      // dataTracePriceCollect
      APIS.Jgzz.dataTracePriceCollect(data).then((res) => {
        console.log(res, "res");
        this.rowobj = res.data;
        if (res.data.pageCode.indexOf(",")) {
          let arr = res.data.pageCode.split(",");
          this.dianjiliebiaocode = arr[arr.length - 1];
        } else {
          this.dianjiliebiaocode = res.data.pageCode;
        }
        this.dianjiliebiaoid = res.data.tenderId;
        this.tendercodelast = res.data.tendercode;
        this.showjgzzhtqlc = true;
      });
    },
    closepopup() {
      this.showjgzzhtqlc = false;
    },
  },
  mounted() {},
};
</script>

<style scoped>
.cellstyle {
  width: 100%;
  display: flex;
  align-items: center;
  height: 9.6%;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cellstyleeven {
  background-color: #e4e8f2;
}
.textchuli {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
